function initView(){
	var titleH = 50,mg=10;
	var bw = $('body').width();
	var bh = $('body').height();
	var itw = (bw-40)/3;
	var ith = (bh-90)/3;
	var leftw = itw-100;
	var centerw = itw+200;
	var rightw = itw-100;
	$('.item-div').css({width:itw+'px',height:ith+'px'});
	$('#div01').css({left:'0px',top:titleH+'px',width:leftw+'px'});
	$('#div02').css({left:'0px',top:titleH+ith+mg+'px',width:leftw+'px'});
	$('#div03').css({left:'0px',top:titleH+(ith+mg)*2+'px',width:leftw+'px'});
	$('#div04').css({left:leftw+mg+'px',top:titleH+'px',width:centerw+'px',height:ith*2+mg+'px'});
	$('#div05').css({left:leftw+mg+'px',top:titleH+(ith+mg)*2+'px',width:centerw+'px'});
	$('#div06').css({left:leftw+centerw+mg*2+'px',top:titleH+'px',width:rightw+'px'});
	$('#div07').css({left:leftw+centerw+mg*2+'px',top:titleH+(ith+mg)+'px',width:rightw+'px'});
	$('#div08').css({left:leftw+centerw+mg*2+'px',top:titleH+(ith+mg)*2+'px',width:rightw+'px'});
}
function loadEchart(){
	var chart01 = echarts.init(document.getElementById('div01'));
	var chart02 = echarts.init(document.getElementById('div02'));
	var chart03 = echarts.init(document.getElementById('div03'));
	var chart04 = echarts.init(document.getElementById('div04'));
	var chart05 = echarts.init(document.getElementById('div05'));
	var chart06 = echarts.init(document.getElementById('div06'));
	var chart07 = echarts.init(document.getElementById('div07'));
	var chart08 = echarts.init(document.getElementById('div08'));
	function loadEchart01(){
		var max = 500; //满刻度大小
	    var scroe = 80/100;
	    var data = max * scroe;
		var option01 = {
		    title: {
		              top: '47%',
		              left: 'center',
		              text: (scroe * 10000 / 100) + ' 分',
		              textStyle: {
		                  color: '#fff',
		                  fontStyle: 'normal',
		                  fontWeight: 'normal',
		                  fontSize: 32
		              }
		          },
		          series: [{
		                  type: 'liquidFill',
		                  itemStyle: {
		                        opacity:0.8,//波浪的透明度
		                        shadowBlur: 10,//波浪的阴影范围
		                        shadowColor:'#FFB931'//阴影颜色
		                    },
		                  radius:'80%',
		                  //水波
		                  color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		                          offset: 0,
		                          color: "#FE8704"
		                      },
		                      {
		                          offset: 1,
		                          color: '#FFB931'
		                      }
		                  ])],
		                  data: [{
		                      value: scroe,
		                  }],
		                  // background: '#000',
		                  center: ['50%', '50%'],
		                  backgroundStyle: {
		                      color: '#fff'
		                  },
		                  label: {
		                      normal: {
		                          formatter: '',
		                          textStyle: {
		                              fontSize: 12
		                          }
		                      }
		                  },
		                  outline: {
		                      itemStyle: {
		                          borderColor: 'transparent',
		                          borderWidth: 5
		                      },
		                      borderDistance: 0
		                  }
		              },
		              //外环线
		              {
		                  "color": ['#FF8B00', 'transparent'],
		                  "type": "pie",
		                  "center": ["50%", "50%"],
		                  "radius": ["80%", "81.5%"],
		                  "hoverAnimation": false,
		                  "data": [{
		                          "name": "",
		                          "value": data,
		                          "label": {
		                              "show": false,
		                              "position": "center",
		                              "color": "#fff",
		                              "fontSize": 38,
		                              "fontWeight": "bold",
		                              "formatter": function(o) {
		                                  return data
		                              }
		                          }
		                      },
		                       { //画剩余的刻度圆环
		                          "name": "",
		                          "value": max - data,
		                          "label": {
		                              show: false
		                          },
		                          labelLine: {
		                              show: false
		                          }
		                      }
		                  ]
		              }
		          ]
		};
		chart01.setOption(option01);
		chart01.resize();
	}
	function loadEchart02(){
		var option02 = {
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {            
		            type: 'shadow'   
		        }
		    },
		    grid: {
				top:'10%',
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'category',
		        splitLine: {show: false},
		        data: ['总费用', '房租', '水电费', '交通费', '伙食费', '日用品数'],
				axisLabel: {
				    textStyle: {
				        color: "#fff",
				        fontSize: 12,
				    },
				}
		    },
		    yAxis: {
		        type: 'value',
		        splitNumber:4,
		        zlevel:999,
		        splitLine:{
		            // show: false
		        },
		        splitArea:{
		            show: true,
		            areaStyle:{
		                color:['rgba(255,255,255,0)','rgba(255,255,255,0.03)','rgba(255,255,255,0.05)','rgba(255,255,255,0.07)']
		            }
		        },
				axisLabel: {
				    textStyle: {
				        color: "#fff",
				        fontSize: 12,
				    },
				}
		    },
		    series: [
		        {
		            name: '生活费',
		            type: 'bar',
		            stack: '总量',
		             barWidth:'50%',
		             itemStyle: {
		               color:'#658dff',
		                barBorderRadius:[20,20,0,0]
		            },
		            data: [200,300, 500, 600, 900, 1000]
		        }
		    ]
		};
		chart02.setOption(option02);
		chart02.resize();
	}
	function loadEchart03(){
		var dataText = [{
		        name: '滑坡',
		        type: 'line',
		        smooth: true,
		        symbolSize: 8,
		        data: [127, 224, 120, 278, 227, 237],
		        barWidth: '30%',
		        itemStyle: {
		            normal: {
		                color: '#f0c725'
		            }
		        }
		    }, {
		        name: '泥石流',
		        type: 'line',
		        smooth: true,
		        symbolSize: 8,
		        data: [27, 124, 70, 178, 127, 157],
		        barWidth: '30%',
		        itemStyle: {
		            normal: {
		                color: '#16f892'
		            }
		        }
		    },
		    {
		        name: '崩塌',
		        type: 'line',
		        smooth: true,
		        symbolSize: 8,
		        data: [127, 74, 120, 99, 130, 355],
		        barWidth: '30%',
		        itemStyle: {
		            normal: {
		                color: '#0BE3FF'
		            }
		        }
		    }
		]
		var dataObj = {
		    year: ['2015', '2016', '2017', '2018', '2019', '2010'],
		    data: {
		        value: [{
		            name: '滑坡',
		             value: [127, 224, 120, 278, 227, 237]
		        }, {
		            name: '崩塌',
		            value: [27, 124, 70, 178, 127, 157]
		        }, {
		            name: '泥石流',
		            value: [127, 74, 120, 99, 130, 355]
		        }]
		    }
		}
		let dataArr = []
		
		dataObj.data.value.map(function(item) {
		    let datachild = []
		    let newArr = {
		        name: item.name,
		        type: 'line',
		        smooth: true,
		        symbolSize: 8,
		        data: item.value,
		        barWidth: '30%',
		        itemStyle: {
		            normal: { 
		                color: item.name ==='滑坡'?'#f0c725':item.name ==='崩塌'?'#0BE3FF':'#16f892'
		            }
		        }
		    }
		      
		dataArr.push(newArr)
		}) 
		console.log(dataArr) 
		var option03 = {
		    color: ['#f0c725', '#16f892'],
		    title: {
		        left: 'center',
		        text: '历年增长',
		        textStyle: {
		            color: '#FFFFFF',
		            fontSize: '14',
		        }
		    },
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: { // 坐标轴指示器，坐标轴触发有效
		            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    legend: {
		        x: 'center',
		        top: '25',
		        textStyle: {
		            color: '#c1cadf',
		            "fontSize": 14
		        }
		    },
		    grid: {
		        left: '6%',
		        right: '4%',
		        top: '25%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        show: true,
		        orient: 'vertical',
		        x: 'right',
		        y: 'center'
		    },
		    xAxis: [{
		        type: 'category',
		        boundaryGap: false,
		        data: dataObj.year,
		        axisLine: {
		            lineStyle: {
		                color: 'rgba(240,199,37,0.5)'
		            }
		        },
		        axisLabel: {
		            interval: 0,
		            color: '#c1cadf',
		            fontSize:'15'
		        }
		    }],
		    yAxis: [{
		        type: 'value',
		        name: '(处)',
		        nameTextStyle: {
		            color: '#c1cadf',
		            align: 'right',
		            lineHeight: 10
		        },
		        axisLine: {
		            lineStyle: {
		                color: 'rgba(240,199,37,0.5)'
		            }
		        },
		        axisLabel: {
		            interval: 0,
		            color: '#c1cadf',
		            fontSize:'15'
		        },
		        splitLine: {
		            show: false
		        }
		    }],
		    series: dataArr
		};
		chart03.setOption(option03);
		chart03.resize();
	}
	function loadEchart04(){
		var option04 = {
			//backgroundColor: '#044060',
			title: {
				text: "",
				left: 'center',
				textStyle: {
					color: '#ffffff'
				}
			},
			visualMap: {
				min: 500,
				max: 3000,
				left: 'left',
				top: 'bottom',
				text: ['高', '低'], // 文本，默认为数值文本
				calculable: true,
				inRange:{
				   color: ['white', 'red']
				},
				textStyle: {
					color: '#ffffff'
				}
			},
			series: [{
				type: 'map',
				mapType: 'pudongxinqu',
				zoom: 1.2,
				label: {
					normal: {
						show: true
					},
					emphasis: {
						textStyle: {
							color: '#fff'
						}
					}
				},
				itemStyle: {

					normal: {
						borderColor: '#389BB7',
						areaColor: '#fff',
					},
					emphasis: {
						areaColor: '#389BB7',
						borderWidth: 0
					}
				},
				animation: false,
				data: [{
						name: '北蔡镇',
						value: 1886
					}, {
						name: '曹路镇',
						value: 1128               
					}, {
						name: '川沙新镇',
						value: 1272
					}, {
						name: '高东镇',
						value: 1174
					}, {
						name: '高桥镇',
						value: 1122
					}, {
						name: '航头镇',
						value: 2631
					}, {
						name: '合庆镇',
						value: 2628,
					}, {
						name: '花木街道',
						value: 1438,
					}, {
						name: '惠南镇',
						value: 932,
					}, {
						name: '金桥镇',
						value: 1742,
					}, {
						name: '金杨新村街道',
						value: 1879,
					}, {
						name: '康桥镇',
						value: 1742,
					}, {
						name: '老港镇',
						value: 1032,
					}, {
						name: '陆家嘴街道',
						value: 1224,
					}, {
						name: '南汇新城镇',
						value: 1382,
					}, {
						name: '三林镇',
						value: 1957,
					}, {
						name: '上钢新村街道',
						value: 1404,
					}, {
						name: '唐镇',
						value: 1808,
					}, {
						name: '塘桥街道',
						value: 1366,
					}, {
						name: '潍坊新村街道',
						value: 2172,
					}, {
						name: '新场镇',
						value: 1351,
					}, {
						name: '洋泾街道',
						value: 1833,
					}, {
						name: '张江镇',
						value: 1106,
					}, {
						name: '周浦镇',
						value: 1196,
					}, {
						name: '张江高科技园区',
						value: 1106
						
					}
				]
				// animationDurationUpdate: 1000,
				// animationEasingUpdate: 'quinticInOut'
			}]
		};
		chart04.setOption(option04);
		chart04.resize();
	}
	function loadEchart05(){
		var data = [220, 182, 191, 234, 290];
		var sum = eval(data.join('+'));
		var colors = [{
		    type: 'linear',
		    x: 0,
		    x2: 0,
		    y: 0,
		    y2: 1,
		    colorStops: [{
		        offset: 0,
		        color: '#a0d911'
		    }, {
		        offset: 0.5,
		        color: '#a0d911'
		    }, {
		        offset: 0.5,
		        color: '#5b8c00'
		    }, {
		        offset: 1,
		        color: '#3f6600'
		    }]
		}];
		var barWidth = 25;
		var option05 = {
		    textStyle: {
		        color: '#fff',
		        fontSize: 16,
		    },
		    grid: {
		        top: '5%',
		        bottom: '5%',
		        left: '10%',
		        right: '10%'
		    },
		    yAxis: {
		        inverse: true,
		        offset: 3,
		        axisLine: {
		            show: 0
		        },
		        axisTick: {
		            show: 0
		        },
		        axisLabel: {
		            fontSize: 16,
					color:'#ffffff'
		        },
		        data: ['种类A', '种类B', '种类C', '种类D', '种类E'],
		    },
		    xAxis: {
		        axisLabel: {
		            show: 0
		        },
		        axisLine: {
		            show: 0
		        },
		        axisTick: {
		            show: 0
		        },
		        splitLine: {
		            show: 0
		        }
		    },
		    series: [{
		        z: 1,
		        type: 'bar',
		        barWidth: barWidth,
		        data: [220, 182, 191, 234, 290],
		        itemStyle: {
		            normal: {
		                color: colors[0]
		            }
		        },
		    }, {
		        z: 2,
		        name: '底部',
		        type: 'pictorialBar',
		        data: [1, 1, 1, 1, 1],
		        symbol: 'diamond',
		        symbolOffset: ['-50%', 0],
		        symbolSize: [10, barWidth],
		        itemStyle: {
		            normal: {
		                color: colors[0]
		            }
		        },
		    }, {
		        z: 3,
		        name: '上部1',
		        type: 'pictorialBar',
		        symbolPosition: 'end',
		        data: data,
		        symbol: 'diamond',
		        symbolOffset: ['50%', 0],
		        symbolSize: [10 * (barWidth - 4) / barWidth, barWidth - 4, ],
		        itemStyle: {
		            normal: {
		                borderColor: '#3f6600',
		                borderWidth: 2,
		                color: '#3f6600'
		            }
		        },
		        label: {
		            show: true,
		            position: 'right',
		            formatter: function(p){
		                return (p.value / sum * 100).toFixed(2) + '%';
		            },
		            fontSize: 16,
		            color: '#fff'
		        },
		    }]
		};
		chart05.setOption(option05);
		chart05.resize();
	}
	function loadEchart06(){
		 var data = [{
		     "name": "1",
		     "value": 10
		 }, {
		     "name": "2",
		     "value": 10
		 }, {
		     "name": "3",
		     "value": 10
		 }, {
		     "name": "4",
		     "value": 10
		 }, {
		     "name": "5",
		     "value": 10
		 }, {
		     "name": "6",
		     "value": 20
		 }, {
		     "name": "7",
		     "value": 30
		 }, ]
		 var option06 = {
		     color: ['#A0CE3A', '#31C5C0', '#1E9BD1', '#0F347B', '#585247', '#7F6AAD', '#009D85', "rgba(250,250,250,0.3)"],
		     title: {
		         text: '总数',
		         subtext: 7789,
		         textStyle: {
		             color: '#f2f2f2',
		             fontSize: 15,
		             // align: 'center'
		         },
		         subtextStyle: {
		             fontSize: 15,
		             color: ['#ff9d19']
		         },
		         x: '36%',
		         y: 'center',
		     },
		     grid: {
		         bottom: 150,
		         left: 100,
		         right: '20%'
		     },
		     legend: {
		         orient: 'vertical',
		         top: "middle",
		         right: "5%",
		         textStyle: {
		             color: '#f2f2f2',
		             fontSize: 14,
		
		         },
		         icon: 'roundRect',
		         data: data,
		     },
		     series: [
		         // 主要展示层的
		         {
		             radius: ['30%', '61%'],
		             center: ['40%', '50%'],
		             type: 'pie',
		             label: {
		                 normal: {
		                     show: true,
		                     formatter: "{c}%",
		                     textStyle: {
		                         fontSize: 14,
		
		                     },
		                     position: 'outside'
		                 },
		                 emphasis: {
		                     show: true
		                 }
		             },
		             labelLine: {
		                 normal: {
		                     show: true,
		                     length: 30,
		                     length2: 55
		                 },
		                 emphasis: {
		                     show: true
		                 }
		             },
		             name: "民警训练总量",
		             data: data,
		
		         },
		         // 边框的设置
		         {
		             radius: ['30%', '34%'],
		             center: ['40%', '50%'],
		             type: 'pie',
		             label: {
		                 normal: {
		                     show: false
		                 },
		                 emphasis: {
		                     show: false
		                 }
		             },
		             labelLine: {
		                 normal: {
		                     show: false
		                 },
		                 emphasis: {
		                     show: false
		                 }
		             },
		             animation: false,
		             tooltip: {
		                 show: false
		             },
		             data: [{
		                 value: 1,
		                 itemStyle: {
		                     color: "rgba(250,250,250,0.3)",
		                 },
		             }],
		         }, {
		             name: '外边框',
		             type: 'pie',
		             clockWise: false, //顺时加载
		             hoverAnimation: false, //鼠标移入变大
		             center: ['40%', '50%'],
		             radius: ['65%', '65%'],
		             label: {
		                 normal: {
		                     show: false
		                 }
		             },
		             data: [{
		                 value: 9,
		                 name: '',
		                 itemStyle: {
		                     normal: {
		                         borderWidth: 2,
		                         borderColor: '#0b5263'
		                     }
		                 }
		             }]
		         },
		     ]
		 };
		 chart06.setOption(option06);
		 chart06.resize();
	}
	function loadEchart07(){
		const data = [60, 90, 100, 50, 70, 33, 80]
		const color = '#26c1f2'
		const barWidth = 0.2 // 柱条占比
		const imageUrl = ''
		function renderItem(params, api) {
		    const ceilHeight = 5 // 装饰的高度
		    const topCenter = api.coord([api.value(0), api.value(1)]) // 顶点中心
		    const height = api.size([0, api.value(1)])[1] // 高度
		    const width = api.size([0, 1])[0] * barWidth; // 宽度
		    const ballRadius = width * 0.8
		    const picSize = width * 1.6
		    return {
		        type: 'group',
		        children: [{
		            // 图片装饰
		            type: 'image',
		            style: {
		                image: imageUrl,
		                x: topCenter[0] - picSize / 2,
		                y: topCenter[1] - picSize - ballRadius,
		                width: picSize,
		                height: picSize
		            }
		        }, {
		            // 圆形装饰
		            type: 'circle',
		            shape: {
		                cx: topCenter[0],
		                cy: topCenter[1],
		                r: ballRadius
		            },
		            style: api.style({
		                fill: '#FFF',
		                stroke: color,
		                lineWidth: 5,
		            })
		        }]
		    }
		}
		var option07 = {
		    color: [color],
		    xAxis: {
		        type: 'category',
		        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				axisLabel: {
				    textStyle: {
				        color: "#fff",
				        fontSize: 12,
				    },
				},
				axisTick:{show:false}
		    },
		    yAxis: {
		        type: 'value',
				axisLabel: {
				    textStyle: {
				        color: "#fff",
				        fontSize: 12,
				    },
				}
		    },
		    series: [{
		            data: data,
		            type: 'bar',
		            barWidth: barWidth * 100 + '%',
		        },
		        {
		            data: data,
		            type: 'custom',
		            renderItem: renderItem,
		            zlevel: 2,
		        }
		    ]
		};
		chart07.setOption(option07);
		chart07.resize();
	}
	function loadEchart08(){
	  let shandian = 'image://';
	  let path = ["",shandian,"",shandian,"",shandian];
	  let pointColor = ["#6c50f3","red","yellow","red","#6c50f3","#6c50f3"];
	  let markProfile = [
		{
		  coord:[1,205.97]
		},
		{
		  coord:[3,281.55]
		}
	  ];
	  var option08 = {
		title: {
		  // text: '日用气量分析',
		  textStyle: {
			align: 'center',
			color: '#fff',
			fontSize: 20,
		  },
		  top: '2%',
		  left: 'center',
		},
		// legend: {
		//   color: ["#17B4FA", "#47D8BE", "#F9A589"],
		//   data: ['日用气量分析'],
		//   left: 'center',
		//   top: "8%",
		//   textStyle: {
		//     color: "#ffffff"
		//   }
		// },
		tooltip: {
		  trigger: 'axis',
		  axisPointer: {
			type: "shadow"
		  },
		},
		grid: {
		  top: '15%',
		  left: '10%',
		  right: '5%',
		  bottom: '15%',
		  // containLabel: true
		},
		xAxis: [{
		  type: 'category',
		  axisLine: {
			show: true,
			lineStyle: {
			  color: '#9581F5'
			},
		  },
		  splitArea: {
			// show: true,
			color: '#f00',
			lineStyle: {
			  color: '#f00'
			},
		  },
		  axisLabel: {
			color: '#fff'
		  },
		  splitLine: {
			show: false
		  },
		  boundaryGap: true,
		  data: ['8：00', '9:00', '10:00', '11:00', '12:00', '13:00'],
		}],

		yAxis: [{
		  type: 'value',
		  min: 0,
		  // max: 140,
		  splitNumber: 4,
		  splitLine: {
			show: true,
			lineStyle: {
			  color: 'rgba(255,255,255,0.1)'
			}
		  },
		  axisLine: {
			show: true,
			lineStyle: {
			  color: '#9581F5'
			},
		  },
		  axisLabel: {
			show: true,
			margin: 20,
			textStyle: {
			  color: '#d1e6eb',

			},
		  },
		  axisTick: {
			show: true,
		  },
		}],

		series: [{
		  // name: '日用气量分析',
		  type: 'bar',
		  markPoint:{
			symbol:shandian,
			symbolSize:[12,18],
			symbolOffset: [0, -20],
			label:{
			  show:false,
			  // padding:50,
			},
			// symbol:"pin",
			data: markProfile
		  },
		  barWidth:40,
		  itemStyle: {
			color:  function (params) {
			  return pointColor[params.dataIndex]
			},
			// borderColor: "#fff",
			// borderWidth: 3,
			// shadowColor: 'rgba(0, 0, 0, .3)',
			// shadowBlur: 0,
			// shadowOffsetY: 2,
			// shadowOffsetX: 2,
		  },
		  tooltip: {
			show: true
		  },
		  areaStyle: {
			normal: {
			  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				offset: 0,
				color: 'rgba(108,80,243,0.3)'
			  },
				{
				  offset: 1,
				  color: 'rgba(108,80,243,0)'
				}
			  ], false),
			  shadowColor: 'rgba(108,80,243, 0.9)',
			  shadowBlur: 20
			}
		  },
		  data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
		},

		]
	  };
		chart08.setOption(option08);
		chart08.resize();
	}
	loadEchart01();
	loadEchart02();
	loadEchart03();
	loadEchart04();
	loadEchart05();
	loadEchart06();
	loadEchart07();
	loadEchart08();
}
initView();
loadEchart();